<template>
	<div class="money">
        <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/layout/layoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>账户信息</el-breadcrumb-item>
            <el-breadcrumb-item>账户余额</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-card class="box-card" style="height:750px;width:95%">
	    	<ul class="msg-box">
                <li>
                    <h4 style="text-align: center;">我的当前余额：{{money}}</h4>
                </li>
	    		<li>
	    			<h4 style="font-weight: bold;">我要充值</h4>
	    		</li>
	    		<li>
	    			<h4 style="margin-bottom: 15px;">充值金额</h4>
	    			<el-radio-group v-model="amountVal" @change="amountChange">
	    				<el-radio border :label="''+ 100">充值100</el-radio>
	    				<el-radio border :label="''+ 500">充值500</el-radio>
	    				<el-radio border :label="''+ 1000">充值1000</el-radio>
	    				<el-radio border :label="''+ 2000">充值2000</el-radio>
	    				<el-radio border :label="''+ 5000">充值5000</el-radio>
	    				<el-radio border :label="''">自定义</el-radio>
	    			</el-radio-group>
	    		</li>
	    		<li>
	    			<h4 style="margin-bottom: 15px;">充值方式</h4>
	    			<el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">
	    				<el-radio border :label="''+ 0">微信</el-radio>
	    				<el-radio border :label="''+ 1">支付宝</el-radio>
	    			</el-radio-group>
	    		</li>
	    		<li>
	    			<h4 style="margin-bottom: 15px;">充值金额</h4>
	    			<el-input :disabled="disabled" clearable v-model="rechargeParams.totalAmt" placeholder="请输入金额" style="width: 150px;"></el-input>
	    		</li>
	    	</ul>
	    	<div style="text-align: center; margin-top: 30px;">
	    		<el-button type="primary" @click="surePay">确认支付</el-button>
	    	</div>
        
	    </el-card>
    </div>
</template>
 
<script>
import axios from 'axios'
export default {
    name:'UserMoney',
	data() {
		return {
			amountVal: '',
			disabled: false,
            allData:[],
            tableData:[],
            money:'',//我的余额
			//充值参数
			rechargeParams: {
				"totalAmt": '', //金额
				"paymentType": "0", //支付方式[0:微信,1:支付宝]
				"transType": "0" //交易类型[0:充值,1:消费]
			}
		}
	},
    created() {
        this.getUserMoney()
    },
	methods: {
		//充值金额
		amountChange(val) {
			this.rechargeParams.totalAmt = val;
			if (val == '') {
				this.disabled = false
			} else {
				this.disabled = true
			}
		},
		//支付方式
		paymentTypeChange(val) {
			this.rechargeParams.paymentType = val
		},
		//确认支付
		async surePay() {
			if (this.rechargeParams.totalAmt == ''){
				this.$message.warning('请输入金额');
				return;
			}else{
        if(this.rechargeParams.paymentType == '0'){
            //微信支付
            axios.get("http://localhost:8080/api/updateUserMoney/updateUserMoneylist",{
              params:{
                money:Number(this.rechargeParams.totalAmt) + this.money,
                userId:localStorage.getItem('Token')
              }
            }).then(
              res=>{
                this.$message({
                  message:'微信充值成功',
                  type:'success'
                })
                this.$router.go(0)
              },
              error=>{
                console.log("88",error.message)
              }
            )
            axios.get("http://localhost:8080/api/addMoneyChange/addMoneyChangelist",{
              params:{
                userId:localStorage.getItem('Token'),
                moneychange:`您已经通过微信充值${this.rechargeParams.totalAmt}元`
              }
            }).then(
              res=>{
                this.$message({
                  
                }); 
              },
              error=>{
                console.log("88",error.message)
              }
            )
            // this.$message.success('微信支付成功');

        }else{
            //支付宝支付
            axios.get("http://localhost:8080/api/updateUserMoney/updateUserMoneylist",{
              params:{
                money:Number(this.rechargeParams.totalAmt) + this.money,
                userId:localStorage.getItem('Token')
              }
            }).then(
              res=>{
                this.$message({
                  message:'支付宝充值成功',
                  type:'success'
                })
                this.$router.go(0)
              },
              error=>{
                console.log("88",error.message)
              }
            )
            axios.get("http://localhost:8080/api/addMoneyChange/addMoneyChangelist",{
              params:{
                userId:localStorage.getItem('Token'),
                moneychange:`您已经通过支付宝充值${this.rechargeParams.totalAmt}元`
              }
            }).then(
              res=>{
                
              },
              error=>{
                console.log("88",error.message)
              }
            )
        //    this.$message.success('支付宝支付成功');
        }
      }
		},
		

  //获取我的余额
  getUserMoney(){
      axios.get("http://localhost:8080/api/getUserMoney/getUserMoneylist",{
        params:{
          userId:localStorage.getItem('Token')
        }
      }).then(
        res=>{
            this.allData = res.data
            this.tableData = this.allData
            this.money = res.data[0].money
            console.log("999",res)
            console.log(this.tableData)
        },
        error=>{
          console.log("88",error.message)
        }
      )
    },
	}
}
</script>
 
<style lang="less" scoped>
    .money{
        margin: 20px;
        width: 100%;
          .title{
            width: 95%;
            padding: 10px;
            background: #fff;
            border: 1px solid #eee;
            margin-bottom: 20px;
          }
    }
	/* 信息列表样式 */
	.msg-box > li {
		list-style: none;
		border-bottom: 1px solid #c5c5c5;
		padding: 20px 10px;
	}
    .el-radio{
        margin: 10px;
    }
</style>